<%--
  Created by IntelliJ IDEA.
  User: 95241
  Date: 2021/9/22
  Time: 23:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>开药</title>

    <link rel="stylesheet" type="text/css" href="css/deal.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>
<%
    String doctorWorkId=(String) request.getAttribute("doctorWorkId");
    String patientAccount=(String) request.getAttribute("patientAccount");
    String registerId=(String) request.getAttribute("registerId");
%>
<body style="background-color: #EBECF0">
<br>
<br>

<h1 style="margin-left: 15%">开药</h1>


<br>
<br>


<div class="container" id="container">
    <br/>
    <form class="form-inline">
        <button type="button" class="btn btn-primary" @click="handleAdd">新增</button>
    </form>
    <hr/>

<center>
<form action="doctorServlet">

    <table class="table table-bordered">
        <thead>
        <tr bgcolor="#a9a9a9">
            <th>序号</th>
            <th>药品</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in tableDatas" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.firstName }}</td>
            <td>{{ item.lastName }}</td>
            <td>
                <button type="button" class="btn btn-default" @click="handleEdit(index)">编辑</button>
                <button type="button" class="btn btn-danger" @click="handleDelete(index)">删除</button>
            </td>
        </tr>
        </tbody>

    </table>
    <input type="hidden" name="skip" value="deal">
    <input type="hidden" name="doctorWorkId" value="<%=doctorWorkId%>">
    <input type="hidden" name="addId" value="<%=registerId%>">
    <input type="submit" value="完成" class="sub">
    <a href="doctorServlet?skip=mainPage"><input type="button" value="返回" class="sub"></a>
</form>
</center>

    <!--新增编辑弹窗-->
    <div class="modal fade" tabindex="-1" role="dialog" id="editModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>药品</label>
                            <input type="text" class="form-control" v-model="form.firstName">
                        </div>
                        <div class="form-group">
                            <label>数量</label>
                            <input type="text" class="form-control" v-model="form.lastName">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="handleSubmit">提交</button>
                </div>
            </div>
        </div>
    </div>


</div>


<script>

    var app=new Vue({
        el:"#container",
        data:{
            form: { },
            tableDatas:[
                {"firstName":"阿莫西林","lastName":"51"},
                {"firstName":"三玖感冒宁","lastName":"35325"},
                {"firstName":"fdhdf","lastName":"436"},
                {"firstName":"fdh","lastName":"46"},
            ],
            cloneTableDatas:[],
            idx:-1,
            query : ""
        },
        //在实例被创建之后被调用
        created: function () {
            this.cloneTableDatas = JSON.parse(JSON.stringify(this.tableDatas))//克隆
        },
        methods: {
            //新增
            handleAdd: function () {
                this.idx = -1;
                this.form = {}
                $('#editModal').modal('show');
            },
            //编辑
            handleEdit: function (index) {
                this.idx = index;
                this.form = JSON.parse(JSON.stringify(this.tableDatas))[index]
                $('#editModal').modal('show');
            },
            //删除
            handleDelete: function (index) {
                this.tableDatas.splice(index, 1);
            },
            //提交
            handleSubmit:function(){
                if(this.idx===-1){
                    this.tableDatas.push(this.form);
                }else{
                    this.$set(this.tableDatas, this.idx, this.form);
                }
                this.tableDatas = this.tableDatas
                $('#editModal').modal('hide');
            },
            //查询firstName列
            handleSearch:function (e) {
                var serchkey=this.query;
                var searchArray=[];
                if(serchkey){
                    searchArray = this.cloneTableDatas.filter((item)=>{
                        return item.firstName.indexOf(serchkey) > -1
                    });
                }else{
                    searchArray = this.cloneTableDatas;
                }
                this.tableDatas = searchArray
            }

        }
    })


</script>





</body>
</html>
